<template>
  <view class="index-page">
    <u-navbar
      title="确认支付"
      :background="{ background: '#111723' }"
      back-icon-color="#fff"
      title-color="#fff"
      :title-bold="true"
      :border-bottom="false"
    ></u-navbar>
  </view>
  <view class="price">¥ {{ state.obj.price }} </view>
  <view class="title">即将进行余额支付</view>
  <u-button
    class="button"
    :ripple="true"
    size="medium "
    shape="circle"
    :custom-style="state.customStyle"
    @click="payment"
    >立即支付</u-button
  >
</template>
<script setup lang="ts">
import { getOrderDetail, payOrder } from '@/api/modules/homePage'
import { reactive, onMounted, watch } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
const state = reactive({
  customStyle: {
    backgroundImage: 'linear-gradient(to right, #7e50d7, #2138cd)',
    color: '#fff'
  },
  order_sn: '',
  obj: {} as any
})
onLoad((options) => {
  state.order_sn = options.order_sn as string
})
onMounted(() => {
  getOrderDetail({ order_sn: state.order_sn }).then((result) => {
    state.obj = result.data
  })
})
//立即支付
const payment = () => {
  uni.showLoading({
    title: '正在加载',
    mask: true
  })
  payOrder({
    order_sn: state.order_sn,
    pay_type: '5',
    pay_password: ''
  })
    .then((result) => {
      uni.hideLoading()
      uni.showToast({
        title: '支付成功'
      })
      setTimeout(() => {
        uni.navigateBack({
          delta: 2 //返回层数，2则上上页
        })
      }, 1000)
    })
    .catch(() => {
      uni.showToast({
        title: '操作失败',
        icon: 'error'
      })
      setTimeout(() => {
        uni.navigateBack({
          delta: 2 //返回层数，2则上上页
        })
      }, 1000)
    })
}
</script>
<style lang="less" scoped>
::v-deep(.u-hairline-border) {
  ::after {
    border: none !important;
  }
}
.price {
  margin: 80rpx;
  color: #ffd400;
  text-align: center;
  font-size: 60rpx;
}
.title {
  text-align: center;
  color: #afafaf;
  margin-bottom: 200rpx;
}
.button {
  display: flex;
  width: 300rpx;
}
</style>
